<template>
  <div>
    <el-card class="card">
      <div id="chartSample" class="chart"></div>
    </el-card>
    <el-card class="card">
      <div id="histogram" class="chart"></div>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

function initHisto() {
  const input = document.getElementById("histogram") as HTMLInputElement;
  var myChart = echarts.init(input);
  var option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  };
  myChart.setOption(option);
}

function initChart() {
  const input = document.getElementById("chartSample") as HTMLInputElement;
  var myChart = echarts.init(input);
  var option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  myChart.setOption(option);
}

onMounted(() => {
  initChart();
  initHisto();
});
/* export default {
  mounted() {
    const input = document.getElementById("chartSample") as HTMLInputElement;
    var myChart = echarts.init(input);
    var option = {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: "line",
        },
      ],
    };
    myChart.setOption(option);
  },
}; */
</script>
<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 500px;
}
.card {
  margin-left: 20px;
  margin-top: 20px;
  width: calc(50% - 40px);
  display: inline-block;
}
</style>
